<template>
  <div class="upload-container">
    <!-- 图片部分 -->
    <div v-if="uploadType === 'image'">
      <div class="flex flex-wrap col-top">
        <div v-if="uploadBtn && ((!multiple && successList.length != limit ) || multiple) "
             class="uploadBox flex-col row-center col-center m-rem-4"
             :class="uploadImageClass"
             @click="upload"
        >
          <i class="el-icon-plus"></i>
          <div class="upload-alt">{{ btnTitle }}</div>
        </div>
        <div v-for="(item , index) in successList" v-if="showList" :key="index"
             class="uploadoListBox m-rem-4"
             :class="uploadListClass"
        >
          <div slot="file" class="cursor-pointer rela">
            <video v-if="item.downAnnexType === 'video/mp4'" ref="videoId" :src="item.annexPath"
                   style="width: 100%; height: 100%; object-fit: fill" :autoplay="false" controls muted
            ></video>
            <img v-else :src="item.annexPath" alt="">

            <div class="handleFixedModel abso pos-0 z-99">
              <i class="el-icon-zoom-in" @click="pictureCardPreview(item)"></i>
              <i class="el-icon-download" @click="downLoadFileFun(item)"></i>
              <i v-if="deleteBool && item.createBy == userId " class="el-icon-delete" @click="deleteFilesFun(item)"></i>
            </div>
          </div>
        </div>
      </div>

      <!-- 文件提示 -->
      <div v-if="isAccept" class="m-rem-t-8 letter-rem-1 cor-99 font-rem-12">
        {{ altMsg || acceptArr.length !== 0 ? '注：' : '' }}
        {{ acceptArr.length !== 0 ? `只能上传${acceptArr.toString()}文件` : '' }}
        {{ altMsg ? altMsg : '' }}
      </div>
    </div>

    <!-- 文件部分 非表格格式 -->
    <div v-if="uploadType === 'btnList'">
      <!-- 按钮 -->
      <div v-if="uploadBtn" :class="[btnAcceptClass,successList.length!=0?'p-rem-b-10':'']">
        <!-- 文件按钮 -->
        <el-button :type="btnType" :icon="btnIcon" :size="btnsize" @click="upload">
          {{ btnTitle }}
        </el-button>
        <!-- 文件提示 -->
        <div v-if="isAccept" class="l-h-rem-18 letter-rem-1 cor-99 font-rem-12 m-rem-l-10">
          {{ altMsg || acceptArr.length !== 0 ? '注：' : '' }}
          {{ acceptArr.length !== 0 ? `只能上传${acceptArr.toString()}文件` : '' }}
          {{ altMsg ? altMsg : '' }}
        </div>
      </div>

      <!-- 非表格文件列表 -->
      <div v-if="showList">
        <div v-for="(item,index) in successList" :key="index" class="flex">
          <i class="h-rem-20 l-h-rem-20 flex col-center row-center m-rem-r-8"
             :class="[fileTitleMainColorBool== true? 'font-rem-14 cor-main cursor-pointer':'font-rem-15 el-icon-paperclip']"
          >
            {{ fileTitleMainColorBool== true ? `${Number(index + 1)}、` : ''}}
          </i>
          <!-- 是pageOffice -->
          <span
            v-if="pageOffice&&(processNewForm['officelook']||processNewForm['exportpdf']||processNewForm['pageofficetaohong']||processNewForm['pageofficeedit'])"
            class="h-rem-20 l-h-rem-20 font-rem-14 ellipsis-1" :title="isFileChinaNameBack(item.annexName)"
          >
            <a :href="item.href" @click="clickPageOfficeFun(item, true,processNewForm)">
              {{ isFileChinaNameBack(item.annexName) }}
            </a>
          </span>
          <!-- 不是pageOffice -->
          <span v-else class="h-rem-20 l-h-rem-20 font-rem-14 ellipsis-1"
                :class="[fileTitleMainColorBool== true? 'cor-main cursor-pointer':'']"
                :title="isFileChinaNameBack(item.annexName)"
                @click="fileTitleMainColorBool== true ? downLoadFileFun(item) : false"
          >
            {{ isFileChinaNameBack(item.annexName) }}
          </span>
          <div class="flex col-center m-rem-l-20" v-if="fileTitleMainColorBool == false">
            <i class="h-rem-20 l-h-rem-20 el-icon-view font-rem-15 flex col-center row-center cursor-pointer p-rem-l-5 p-rem-r-5"
               @click="LookFileViewFun(item)"
            ></i>
            <i class="h-rem-20 l-h-rem-20 el-icon-download font-rem-15 flex col-center row-center cursor-pointer p-rem-l-5 p-rem-r-5 cor-main"
               @click="downLoadFileFun(item)"
            ></i>
            <i v-if=" deleteBool && item.createBy == userId " typeC="danger"
               class="h-rem-20 l-h-rem-20 el-icon-delete font-rem-15 flex col-center row-center cursor-pointer p-rem-l-5 p-rem-r-5"
               @click="deleteFilesFun(item)"
            ></i>
          </div>
        </div>
      </div>
    </div>

    <!-- 文件部分 表格格式 -->
    <div v-if="uploadType === 'btnTableList'">
      <!-- 按钮 -->
      <div v-if="uploadBtn" class="m-rem-b-16">
        <!-- 文件按钮 -->
        <el-form-item label="" :prop="formItemProp" label-width="0px" class="upload-file-pad">
          <div :class="btnAcceptClass">
            <el-button :type="btnType" :icon="btnIcon" :size="btnsize" @click="upload">
              {{ btnTitle }}
            </el-button>
            <!-- 文件提示 -->
            <div v-if="isAccept" class="l-h-rem-18 letter-rem-1 cor-99 font-rem-12 m-rem-l-10">
              {{ altMsg || acceptArr.length != 0 ? '注：' : '' }}
              { {{ acceptArr.length !== 0 ? `只能上传${acceptArr.toString()}文件` : '' }}
              {{ altMsg ? altMsg : '' }}
            </div>
          </div>
        </el-form-item>
      </div>

      <!-- 表格文件列表 -->
      <div v-if="showList">
        <el-table stripe class="bao_tableStyle" :data="successList">
          <el-table-column label="序号" type="index" width="80" align="center" />
          <el-table-column v-if="fileTypeBool" show-overflow-tooltip label="文件类型" prop="annexName" align="left" width="150">
            <template slot-scope="scope">
              <span class="ellipsis-1">{{ isFileChinaNameBack(scope.row.annexName) }}</span>
            </template>
          </el-table-column>
          <el-table-column label="文件名称" show-overflow-tooltip prop="annexName" align="left" min-width="200">
            <template slot-scope="scope">
              <span class="ellipsis-1">{{ isFileChinaNameBack(scope.row.annexName) }}</span>
            </template>
          </el-table-column>
          <el-table-column label="上传人" show-overflow-tooltip prop="createName" align="left" width="200">
            <template slot-scope="scope">
              <span class="ellipsis-1">{{ isFileChinaNameBack(scope.row.createName) }}</span>
            </template>
          </el-table-column>
          <el-table-column label="文件大小" show-overflow-tooltip prop="annexSize" align="left" width="120" :formatter="filterSize" />
          <el-table-column label="上传时间 " show-overflow-tooltip align="left" prop="createDate" width="190" />
          <el-table-column v-if="tableLastFixedType" label="操作" :fixed="tableLastFixedType ? 'left' : 'right'" align="left" width="170">
            <template slot-scope="scope">
              <el-button type="text" @click="fileLook(scope.row)">查看</el-button>
              <el-button type="text" @click="downLoadFileFun(scope.row)">下载</el-button>
              <el-button v-if="deleteBool && scope.row.createBy == userId" typeC="danger" type="text"
                         @click="deleteFilesFun(scope.row)"
              >删除</el-button>
            </template>
          </el-table-column>
          <el-table-column v-else label="操作" align="left" width="170">
            <template slot-scope="scope">
              <el-button type="text" @click="fileLook(scope.row)">查看</el-button>
              <el-button type="text" @click="downLoadFileFun(scope.row)">下载</el-button>
              <el-button v-if="deleteBool && scope.row.createBy == userId" typeC="danger" type="text"
                         @click="deleteFilesFun(scope.row)"
              >删除</el-button>
            </template>
          </el-table-column>
          <!-- 列表缺省 -->
          <div slot="empty" class="zjm_no_data_table_list height-100 flex row-center col-center">
            <el-empty :image-size="70" description="暂无数据"></el-empty>
          </div>
        </el-table>
      </div>
    </div>

    <!-- **** -->
    <uploader ref="uploader" :name="uploaderName" :successList="successList" :multiple="multiple" :limit="limit"
              @fileSuccess="fileSuccess"
    ></uploader>

    <!-- 放大视频 -->
    <el-dialog :visible.sync="dialogVisible" title="预览" class="enlargeImage" width="30%" append-to-body :close-on-click-modal="false"
               :close-on-press-escape="false" @close="dialogVisible=false"
    >
      <video v-if="dialogImageType === 'video/mp4'" ref="videoId" :src="dialogImageUrl"
             style="width: 100%; height: 100%; object-fit: fill" :autoplay="false" controls muted
      ></video>
      <img v-else width="100%" :src="dialogImageUrl" alt="" class="obj-fit-contain">
    </el-dialog>
  </div>
</template>

<script>
// 混入
import { uploadMixins } from '@/mixins/publicMixins/uploadMixins'
import uploader from './uploader/index'
export default {
  mixins: [uploadMixins],
  components: { uploader },

  props: {
    // 超大附件 第三放上传附件 的唯一性 类似css的id类名 多个上传组件时 需要有唯一性
    uploaderName: {
      type: String
    },

    // 上传类型 image 图片 、 btnList 按钮 非表格附件list 、 btnTableList 按钮 表格附件list
    uploadType: {
      type: String
    },

    formItemProp: {
      type: String,
      default: ''
    },

    // 是否显示上传按钮 默认 显示
    uploadBtn: {
      type: Boolean,
      default: true
    },

    // 上传类型 = 图片 上传按钮块样式
    uploadImageClass: {
      type: String,
      default: 'uploadVideoBox' // 默认 uploadVideoBox  == 非表格内图片上传 、  uploadVideoTableBox == 表格内 上传图片
    },

    // 上传类型=图片 上传图片完成 list样式块
    uploadListClass: {
      type: String,
      default: 'uploadVideoListBox' // 默认 uploadVideoListBox  == 非表格内图片上传 、  uploadTableVideoListBox == 表格内 上传图片
    },

    // 按钮与文件格式 模块样式
    btnAcceptClass: {
      type: String,
      default: () => 'flex col-center'
    },

    // 按钮文字
    btnTitle:{
      type: String,
      default: ''
    },

    // 按钮类型格式 primary / success / warning / danger / info / text
    btnType: {
      type: String,
      default: 'primary'
    },

    // 按钮大小 medium / small / mini
    btnsize: {
      type: String,
      default: 'small'
    },

    // 按钮图标
    btnIcon: {
      type: String,
      default: ''
    },

    // 是否显示限制提示语
    isAccept: {
      type: Boolean,
      default: () => true
    },

    // 自定义提示语
    altMsg: {
      type: String,
      default: () => ''
    },

    // 文件格式
    acceptArr: {
      type: Array,
      default: () => []
    },

    // 是否多选
    multiple: {
      type: Boolean,
      default: true
    },

    // 可上传的数量
    limit: {
      type: Number
    },

    // 是否显示文件列表
    showList: {
      type: Boolean,
      default: false
    },

    // 是否显示文件类型
    fileTypeBool: {
      type: Boolean,
      default: false
    },

    // 将表格文件操作列固定位置
    tableLastFixedType: {
      type: String,
      default: ''
    },

    // 是否可以删除
    deleteBool: {
      type: Boolean,
      default: true
    },

    // 文件标题是否为主色 true: 主色 添加标题点击事件 并注释其他查看/下载按钮部分， false:非主色 取消标题点击事件 并打开其他查看/下载按钮部分注释
    fileTitleMainColorBool: {
      type: Boolean,
      default: false
    },

    // 父级成功的附件
    successList: {
      type: Array,
      default: ()=> {
        return []
      }
    },
    // ---
    pageOffice: {
      type: Boolean,
      default: false
    },
    processNewForm: Array
  },
  data() {
    return {
      userName: this.$store.state.user.userInfo.username || this.$store.state.user.userInfo.nickName,
      userId: this.$store.state.user.userInfo.userId,
      filesProcessDialog: false, // 进度条弹框
      filesProcessList: [], // 进度条数据
      filesNum: 0, // 上传的数量
      successData: [], // 上传成功的附件
      // successList: []// 上传的附件
      dialogVisible: false, // 图片放大时的弹框
      dialogImageUrl: null, // 图片放大
      dialogImageType: null// 放大的格式判断
    }
  },

  computed: {
    user() {
      return this.$store.state.user
    }
  },
  created() {},

  methods: {
    // 上传
    upload() {
      var obj = {
        accept: this.acceptArr,
        multiple: this.multiple,
        limit: this.limit,
        uploadType: this.uploadType
      }
      console.log(11111)
      this.$refs.uploader.upload(obj)
    },

    // 上传成功
    fileSuccess(data) {
      this.$emit('getFileList', data)
    },

    // 删除文件
    deleteFilesFun(row) {
      console.log(row)
      console.log(this.successList)
      if (row.editBool === true) {
        this.successList.forEach((element, index) => {
          if (element.id === row.id) {
            this.msgAlt('删除成功','success')
            this.$emit('deleteFileList', element, 'deleteAnnexIds')
          }
        })
      } else {
        this.deleteFileFun(row, this.successList)
      }
    },

    // 放大图片
    pictureCardPreview(row) {
      this.dialogImageUrl = row.annexPath
      this.dialogImageType = row.downAnnexType
      this.dialogVisible = true
    },

    // pageOffice上传附件
    clickPageOfficeFun(item, officeType, processNewForm) {
      let newPath = item.filePath.replace('\\\\', '\/\/')
      newPath = newPath.replace('\\', '\/')
      newPath = newPath.replace('\\', '\/')
      // console.log(newPath)
      const that = this
      let dataNew = {}
      // word查看
      if (processNewForm['officelook'] || processNewForm['pageofficeedit']) {
        dataNew = {
          filePath: encodeURIComponent(newPath),
          fileId: item.id,
          userId: that.userId,
          editType: false
        }

        if (processNewForm['pageofficeedit']) {
          dataNew.editType = true
        }
        item.href = POBrowser.openWindowModeless(
          process.env.VUE_APP_PAGEOFFICE_API +
                        '/word?fileId=' + item.id +
                        '&userId=' + that.userId +
                        '&editType=' + dataNew.editType,
          'width=1200px;height=800px;',
          JSON.stringify(dataNew)
        )
      }
      // pdf 查看
      // if(processNewForm['pageofficepdf']){
      //    item.href = POBrowser.openWindowModeless(
      //     process.env.VUE_APP_PAGEOFFICE_API +
      //       "/pdf?filePath=" +
      //       encodeURIComponent(newPath),
      //     "width=1200px;height=800px;"
      //   );
      // }
      if (processNewForm['pageofficetaohong']) {
        // item.href= POBrowser.openWindowModeless(process.env.VUE_APP_PAGEOFFICE_API +"/showTaoHongWord" , 'width=1200px;height=800px;')
        const data = {
          id: this.$route_query.id
        }
        methodGetApi('/send-document-manage/getTaoHongStatus', data).then(res => {
          // 已套红查看
          if (res.data === true) {
            dataNew = {
              filePath: encodeURIComponent(newPath),
              fileId: item.id,
              userId: that.userId,
              editType: false
            }
            item.href = POBrowser.openWindowModeless(
              process.env.VUE_APP_PAGEOFFICE_API +
                                '/word?fileId=' + item.id +
                                '&userId=' + that.userId +
                                '&editType=' + dataNew.editType,
              'width=1200px;height=800px;',
              JSON.stringify(dataNew)
            )
          } else {
            dataNew = {
              filePath: encodeURIComponent(newPath),
              tempCode: 'temp2009',
              code: 'taohong_01',
              annexId: item.id
            }
            if (officeType == true) {
              dataNew.editType = true
            }
            item.href = POBrowser.openWindowModeless(
              process.env.VUE_APP_PAGEOFFICE_API + '/page/taoHong?tempCode=temp2009&code=taohong_01&annexId=' + item.id + '&businessId=' + this.$route_query.id, 'width=1200px;height=800px;',
              JSON.stringify(dataNew)
            )
          }
        })
      }
    },

    // 文件大小转换
    filterSize(row) {
      const size = row.annexSize
      if (!size) return ''
      if (size < this.pow1024(1)) return size + ' B'
      if (size < this.pow1024(2)) return (size / this.pow1024(1)).toFixed(2) + ' KB'
      if (size < this.pow1024(3)) return (size / this.pow1024(2)).toFixed(2) + ' MB'
      if (size < this.pow1024(4)) return (size / this.pow1024(3)).toFixed(2) + ' GB'
      return (size / this.pow1024(4)).toFixed(2) + ' TB'
    },

    pow1024(num) {
      return Math.pow(1024, num)
    }
  }
}
</script>
